<template>
    <div class="view">
        <div ref="header" class="nav-back">
            <span class="iconfont icon-fanhui" @click="back"></span>
            <span class="nickname">&nbsp;兴趣爱好&nbsp;{{selNum}}/10</span>
            <button class="save rt" :class="{disabled:selNum==0}" @click="save" :disabled="selNum==0">保存</button>
        </div>
        <cube-scroll class="scroll" ref="scroll" :scroll-events="['scroll']">
            <div class="hobbies-box">
                <div class="life">
                    <div class="title-box flex">
                        <span class="iconfont icon-shafa"></span>
                        <span class="title">生活</span>
                    </div>
                    <div class="content-box">
                        <span :class="{'active':selItems.indexOf(item.id)!==-1}" v-for="item in hobbyItems.生活" @click="itemSel(item.id,item.name,$event)">{{item.name}}</span>
                    </div>
                </div>
                <div class="sport">
                    <div class="title-box flex">
                        <span class="iconfont icon-tiyu-lanqiu"></span>
                        <span class="title">体育</span>
                    </div>
                    <div class="content-box">
                        <span :class="{'active':selItems.indexOf(item.id)!==-1}" v-for="item in hobbyItems.体育" @click="itemSel(item.id,item.name,$event)">{{item.name}}</span>
                    </div>
                </div>
                <div class="leisure">
                    <div class="title-box flex">
                        <span class="iconfont icon-xiuxian"></span>
                        <span class="title">休闲</span>
                    </div>
                    <div class="content-box">
                        <span :class="{'active':selItems.indexOf(item.id)!==-1}" v-for="item in hobbyItems.休闲" @click="itemSel(item.id,item.name,$event)">{{item.name}}</span>
                    </div>
                </div>
                <div class="diet">
                    <div class="title-box flex">
                        <span class="iconfont icon-yinliao"></span>
                        <span class="title">饮食</span>
                    </div>
                    <div class="content-box">
                        <span :class="{'active':selItems.indexOf(item.id)!==-1}" v-for="item in hobbyItems.饮食" @click="itemSel(item.id,item.name,$event)">{{item.name}}</span>
                    </div>
                </div>
            </div>
        </cube-scroll>
    </div>
</template>

<script lang="ts">
    import {Component, Vue} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";

    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import {updateUser} from "@/store/dispatches";
    import UserEntity from "@/entity/UserEntity";
    import CommonUnit from "@/unit/CommonUnit";

    @Component({
        components: {}
    })
    export default class MineDataEdit extends Scene {
        @State("UserStore")
        public user!: InterfaceUser;
        private selNum: number = 0;
        private hobbyItems: any = {};
        private selItems: string = "";
        private selItemsSnap: string = "";

        private getHobbyItems(): void {
            let loadToast = (<any> this).$createToast({
                time: 0,
                type: "loading",
                mask: true,
                txt: "加载兴趣爱好信息"
            }).show();
            Http.get(this.api.getParameterItem, {type: "HOBBY"}).then((res) => {
                if (res.code == 1) {
                    loadToast.hide();
                    console.log(res);
                    this.hobbyItems = res.data;
                } else {
                    loadToast = (<any> this).$createToast({
                        time: 2500,
                        type: "error",
                        mask: true,
                        txt: `${res.msg}`,
                        onTimeout: () => {
                            this.navigateBack();
                        }
                    }).show();
                }

            }).catch((res) => {
                loadToast.hide();
                (<any> this).$createToast({
                    time: 2500,
                    type: "error",
                    txt: "网络繁忙,暂无信息!",
                    mask: true,
                    onTimeout: () => {
                        this.navigateBack();
                    }
                }).show();
            });
        }

        private itemSel(id: number, name: string, event: any): void {
            let tg = event.target;
            if (tg.classList.contains("active")) {
                tg.classList.remove("active");
                this.selItems = this.selItems.replace(id + ",", "");
                this.selItemsSnap = this.selItemsSnap.replace(name + ",", "");
                this.selNum--;
            } else {
                if (this.selNum >= 10) {
                    (<any> this).$createToast({
                        time: 600,
                        txt: "您最多选择10个标签",
                        mask: true,
                        type: "error"
                    }).show();
                    return;
                }
                tg.classList.add("active");
                this.selItems = this.selItems + id + ",";
                this.selItemsSnap = this.selItemsSnap + name + ",";
                this.selNum++;
            }
        }

        private back(): void {
            this.navigateBack();
        }

        private async save(): Promise<any> {
            let toast = (<any> this).$createToast({
                time: 0,
                txt: "保存中...",
                mask: true
            }).show();
            try {
                Http.post(this.api.hobbySave, {HOBBY: this.selItems.slice(0, -1), SNAP_HOBBY: this.selItemsSnap.slice(0, -1)}, {token: this.user.token}).then((res) => {
                    if (res.code == 1) {
                        this.authentication();
                        toast = (<any> this).$createToast({
                            time: 2500,
                            txt: "保存成功，正在更新资料",
                            type: "correct",
                            mask: true,
                            onTimeout: () => {
                                this.navigateBack();
                            }
                        }).show();
                    } else {
                        this.globalSingleResultToast(res);
                    }
                });
            } catch (e) {
                toast.hide();
            }
        }

        private mounted(): void {
            this.getHobbyItems();
            if (this.user.hobby == "") {
                this.selItems = this.user.hobby;
            } else {
                this.selNum = this.user.hobby.split(",").length;
                this.selItems = this.user.hobby + ",";
            }
            if (this.user.snapHobby == "未填写" || this.user.snapHobby == "") {
                this.selItemsSnap = "";
            } else {
                this.selItemsSnap = this.user.snapHobby + ",";
            }
        }
    }
</script>

<style scoped lang="stylus">
    .view
        width 100vw;
        height 100vh;
        background $theme-page-common-background-color;
        overflow hidden;

        .nav-back
            width 100vw;
            position fixed;
            top 0
            left 0;
            z-index: 100;
            color $theme-common-color;
            padding 15px 10px;
            padding-top calc(15px + var(--safe-area-inset-top));
            background rgba(255, 255, 255, 1);
            border-bottom 1px solid $theme-line-color;

            .save
                font-size 16px;
                background-color transparent;
                border none;
                color $theme-common-color;
                padding 0px;
                height 15px;
                line-height 15px;

            .disabled
                opacity .4;

            .nickname
                font-size 16px;
                color $theme-common-color;

        .scroll
            margin-top calc(47px + var(--safe-area-inset-top));
            position relative;
            height calc(100vh - var(--safe-area-inset-top) - var(--safe-area-inset-bottom));

            .hobbies-box
                background-color #fff;
                padding-bottom calc(60px + var(--safe-area-inset-bottom));

                > div
                    .title-box
                        height 50px;
                        padding 0px 10px;
                        justify-content: space-between;
                        align-items center;

                        .iconfont
                            display inline-block;
                            width 40px;
                            font-size 26px;

                        .icon-tiyu-lanqiu, .icon-yinliao
                            font-size 28px;

                        .title
                            display inline-block;
                            text-align left;
                            width calc(100vw - 20px - 40px);
                            font-size 16px;

                    .content-box
                        margin 0px 22px;
                        padding 10px 0px 10px 15px;
                        border-left 1px solid $theme-line-color;
                        line-height 1.3em;

                        > span
                            display inline-block;
                            border 1px solid $theme-line-color;
                            border-radius 30px;
                            padding 2px 10px;
                            margin 5px;

                        span.active
                            color #fff;
                            background-color $theme-common-color;
                            border 1px solid $theme-common-color;


</style>
